<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>axios + vue</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="获取笑话" @click="getJoke">
            <p> {{joke}} </p>
        </div>
        <!-- 官网提供的 axios 在线地址-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
             /*
                接口1：随机笑话
                请求地址: https://autumnfish.cn/api/joke
                请求方法: get
                响应内容：随机笑话
            */
            var app = new Vue({
                el:'#app',
                data:{
                    joke:'点击获取笑话',
                },
                methods:{
                    getJoke:function(){
                        var that = this;
                        axios.get("https://autumnfish.cn/api/joke").then(function(rs){
                            // console.log(rs);
                             //console.log(rs.data);
                            // console.log(that.joke);
                            that.joke = rs.data;
                        },function(err){
                            console.log(err);
                        })
                    }
                }
            })
        </script>
    </body>
</html>